<template>
    <div class="table-wrap">
        <div class="title">需求人耗材明细</div>
        <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false" :custom-row='(record) => {
            return {
                on: { // 事件
                    click: () => edit(record),       // 点击行
                },
            }
        }'>
            <template slot="operation" slot-scope="text, record">
                <!-- <a-popconfirm v-if="dataSource.length" title="是否删除?" @confirm="() => onDelete(record.key)"
                    @visibleChange="handelvisibleChange"> -->
                <a href="javascript:;" @click.stop="onDelete(record)">删除</a>
                <!-- </a-popconfirm> -->
            </template>
        </a-table>
        <div class="btn-wrap">
            <a-button type="primary" class="editable-add-btn" @click="handleAdd">
                添加
            </a-button>
        </div>
        <div class="btn-wrap">
            <a-button type="primary" class="editable-add-btn" @click="handleGetTable">
                保存
            </a-button>
        </div>

        <editable-cell ref="editTable" :text="record" @edit="handleEdit" @add="onCellChange" />
    </div>
</template>
<script>
import EditableCell from './editTble.vue';
import { vehicleId, material } from '@/api/vehicle/consumables'
export default {
    components: {
        EditableCell,
    },
    data() {
        return {
            visibleDrawer: false,
            dataSource: [],
            count: 0,
            record: {},
            status: false,
            columns: [
                {
                    title: '发货设备',
                    dataIndex: 'device',
                    width:90,
                    ellipsis:true,
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: '发货数量',
                    dataIndex: 'count',
                    ellipsis:true,
                    width:89,
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: '单位',
                    dataIndex: 'unit',
                    ellipsis:true,
                    width:60,
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: '尺寸',
                    dataIndex: 'size',
                    ellipsis:true,
                    width:60,
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    width:55,
                    scopedSlots: { customRender: 'operation' },
                },
            ],
            routrData: null
        };
    },
    created() {
        this.routrData = this.$route.query
        this.getList()
    },
    methods: {
        getList() {
            vehicleId({ type: 0, vehicleId: this.routrData.vehicleId }).then((res) => {
                this.count = res.data?.length
                res.data?.forEach((item, index) => {
                    item.key = index
                })
                this.dataSource = res.data
            })
        },
        onCellChange(value) {
            const { count, dataSource } = this;
            let newData = value;
            newData.key = count
            this.dataSource = [...dataSource, newData];
            this.count = count + 1;
        },
        onDelete(record) {
            const that = this
            this.$confirm({
                title: '确认删除所选中数据?',
                content: '当前选中设备为' + record.device + '的数据',
                onOk() {
                    const dataSource = [...that.dataSource];
                    that.dataSource = dataSource.filter(item => item.key !== record.key);
                },
                onCancel() { }
            })

        },
        handleAdd() {
            if (!this.status) {
                this.$refs.editTable.open(1)
            }
        },
        showDrawer() {
            this.visibleDrawer = true;
        },
        handleEdit(value) {
            const dataSource = [...this.dataSource];
            this.dataSource = dataSource.map((item) => {
                if (item.key === this.record.key) {
                    value.key = item.key
                    return value
                } else {
                    return item
                }
            })
        },
        edit(record) {
            this.record = record
            if (!this.status) {
                this.$refs.editTable.open(2)
            }

        },
        handleGetTable() {
            // this.dataSource.forEach(item => {
            //     for (let val in item) {
            //         if (!item[val]) {
            //             this.$message.error('表格中有未填写的数据')
            //             return;
            //         }
            //     }
            // })
            if (this.dataSource.length === 0) {
                this.$message.error('请点击添加，新增数据')
                return;
            }
            const query = {
                type: 0,
                vehicleId: this.routrData.vehicleId,
                userId: this.routrData.userId,
                materialList: this.dataSource
            }
            material(query).then((res) => {
                if (res.code === 200) {
                    this.$message.success('保存成功')
                    this.getList()
                }
            })
        },
        handelvisibleChange(val) {
            this.status = val
        }
    },
};
</script>
<style>
.editable-cell {
    position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
    padding-right: 24px;
}

.editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
}

.editable-cell-icon {
    line-height: 18px;
    display: none;
}

.editable-cell-icon-check {
    line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
    display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
    color: #108ee9;
}

.editable-add-btn {
    width: 70%;
    margin: 10px auto;
}

.btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.table-wrap {
    padding: 15px 10px;
    max-width: 750px;
    margin: auto;
}

.title {
    height: 50px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}
th{
    padding: 8px !important;
}
td{
    padding: 12px 8px !important; 
}
</style>